<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const dataList = ref<any>([
  {
    nickName: "Jamie Dimon💯 😊",
    merchantName: "卓越教育",
    createdAt: "2025-05-05 09:00:00",
    contact: "Jamie Dimon",
    phone: "12345678901",
  },
  {
    nickName: "Jamie Dimon💯 😊",
    merchantName: "大D美术",
    createdAt: "2025-05-05 09:00:00",
    contact: "Jamie Dimon",
    phone: "12345678901",
  },
]);

const handleAction = (action: string) => {
  if (action === "add") {
    router.push({ name: "XiaolankaAdminMerchantForm" });
  }
};
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-breadcrumb :items="['商家管理', '商家列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="商家名称">
            <umrp-input placeholder="请输入商家名称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="手机号码">
            <umrp-input placeholder="请输入联系人的手机号码"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="联系人">
            <umrp-input placeholder="请输入联系人的姓名"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card>
      <umrp-container :gap="16" align="start">
        <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
          <template #columns>
            <umrp-table-column title="序号" data-index="id"></umrp-table-column>
            <umrp-table-column title="商家门头照" slot-name="cover"></umrp-table-column>
            <umrp-table-column title="商家名称" data-index="merchantName"></umrp-table-column>
            <umrp-table-column title="联系人" data-index="contact"></umrp-table-column>
            <umrp-table-column title="联系电话" data-index="phone"></umrp-table-column>
            <umrp-table-column title="入驻时间" data-index="createdAt"></umrp-table-column>
            <umrp-table-column title="操作" slot-name="action" :width="140"></umrp-table-column>
          </template>
          <template #cover>
            <umrp-image :height="80" :width="80"></umrp-image>
          </template>
          <template #action>
            <umrp-space :size="10">
              <umrp-button type="primary" v-route="'XiaolankaAdminMerchantForm'">编辑</umrp-button>
              <umrp-popconfirm message="您确认删除么？">
                <umrp-button type="danger">删除</umrp-button>
              </umrp-popconfirm>
            </umrp-space>
          </template>
        </umrp-table>
      </umrp-container>
    </umrp-card>
  </umrp-container>
</template>
